<table width="100%" border="0" cellpadding="0" cellspacing="0" class='grid' id="gallery-grild-list">
 <tbody>
<{if count($products) > 0}>
<{assign var=gallery_col_limit value=$env.conf.b2c.gallery.display.grid.colnum}>
<tr>
<{foreach from=$products key=key item=product name=goods}>
<{assign var=gallery_display value=(($smarty.foreach.goods.iteration)%$gallery_col_limit)}>
    <td id="pdt-<{$product.goods_id}>" product="<{$product.goods_id}>" class="itemsList" width="<{math equation=floor(10) x=$env.conf.gallery.display.grid.colnum}>%;">
    <div class="items-gallery <{$mask_webslice}> current-boder">
    <div class="goodpic" style='<{if $image_set.S.width}> width:<{$image_set.S.width}>px; margin:0 auto;height:<{$image_set.S.height}>px;<{/if}>'>
      <{if $product.tags}>
      <{foreach from=$product.tags item=tags}>
        <{assign var="tagImage" value=$tags.params.tag_image}>
        <div class="GoodsTip">
            <img src="<{$tagImage|storager:'s'}>" style="opacity:<{$tags.params.tag_opacity/100}>" pos = "<{$tags.params.pic_loc}>"/>
        </div>
      <{/foreach}>
      <{/if}>
        <a target="_blank" href='<{link app=b2c ctl=site_product act=index arg=$product.goods_id}>'  style='<{if $image_set.S.width}> width:<{$image_set.S.width}>px;display: table-cell; vertical-align: middle; text-align: center; margin:0 auto;height:<{$image_set.S.height}>px;<{/if}>'>
      <{if $product.udfimg == 'true'}>
      <{assign var="gimage" value=$product.thumbnail_pic}>
      <{else}>
      <{assign var="gimage" value=$product.image_default_id|default:$defaultImage}>
      <{/if}>
        <img src="<{$gimage|storager:'s'}>" alt="<{$product.name|escape:html}>"/>
        </a>
    </div>
      <div class="goodinfo">
        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="entry-content">
          <tr>
            <td colspan="2">
            <h6>
            <a href="<{link app=b2c ctl=site_product act=index arg=$product.goods_id}>" title="<{$product.name|escape:html}>" class="entry-title"><{$product.name|escape:"html"}></a>
            <{if $product.tags}>
                <{foreach from=$product.tags item=tags}>
	            <{if $tags.params.tag_showOnIndex}>
	            &nbsp;<span style="color:<{$tags.tag_bgcolor}>"><{$tags.tag_name}></span>
	            <{/if}>
	            <{/foreach}>
            <{/if}>
            </h6>
            </td>
          </tr>
          <tr>
            <td colspan="2"><ul>
                <li style="padding-left:5px"><span class="fontcolorRed font14px fontbold"><{$product.price|cur_odr:$order.currency}></span></li>
              </ul></td>
          </tr>
          <tr>
            <td colspan="2" style="padding-left:5px"><{if $product.mktprice && $setting.mktprice eq true}><span class="mktprice1"><{$product.mktprice|cur_odr:$order.currency}></span><{else}>&nbsp;<{/if}></td></tr>
            <tr>
            <td colspan="2">
            <ul class="button">
                <{goodsmenu product=$product setting=$setting login=$login zindex=$zindex--}>
                                <li class="btncmp">
             <a href="javascript:void(0)" onclick="gcompare.add({gid:'<{$product.goods_id}>',gname:'<{$product.name|addslashes|escape:html}>',gtype:'<{$product.type_id}>',url:'<{link app=b2c ctl=site_product act=index arg=$product.goods_id}>'});" class="btncmp" title="<{t}>商品对比<{/t}>">
              <!--<{t}>商品对比<{/t}>-->
             </a>
             </li>
              </ul></td>
          </tr>
        </table>
      </div>
    </div>

    </td>
    <{if !$gallery_display}>
       </tr>
  	<{/if}>
  <{/foreach}>
  <{/if}>
  </tbody>
</table>
<script>


/*Auto HEIGHT*/
try{
	$$('#gallery-grild-list tbody')[0].getChildren().each(function(tr){
		new AutoSize(tr.getElements('h6'),'height');
	});
}catch(e){}



void function(){
/*橱窗放大镜
  author:litie[A]shopex.cn
  (c)  ShopEx.cn
*/
    (new Image()).src = '<{$base_url}>statics/loading.gif';
    var getAmongPos = function(size,to){
                 var elpSize = $(to).getSize();
                 return {
                    'top':Math.abs((elpSize.y/2).toInt()-(size.height/2).toInt()+to.getPosition().y+elpSize.scroll.y),
                    'left':Math.abs((elpSize.x/2).toInt()-(size.width/2).toInt()+to.getPosition().x+elpSize.scroll.x)
                 };
            };

   $$('#gallery-grild-list .zoom a').addEvent('click',function(e){
            e.stop();
            if(this.retrieve('active'))return;
            var _this = this;
            _this.store('active',true);
            var tpic = this.getParent('.items-gallery').getElement('.goodpic img');
            var bpic_src = this.get('pic');

            var loading = new Element('div',{
                 styles:{'background':'#fff url(<{$base_url}>statics/loading.gif) no-repeat 50% 50%',
                         'width':40,
                         'height':40,
                         'border':'1px #e9e9e9 solid',
                         'opacity':.5}}).inject(document.body).amongTo(tpic);

            new Asset.image(bpic_src,{onload:function(img){

                  loading.remove();
                  var winsize = window.getSize();
                  var imgSize = $(img).zoomImg(winsize.x,winsize.y,1);
                  var fxv = $extend(getAmongPos(imgSize,window),imgSize);
                  var imgFx = new Fx.Morph(img,{link:'cancel'});
                  img.setStyles($extend(tpic.getCis(),{opacity:0.5})).inject(document.body).addClass('img-zoom').addEvent('click',function(){
                      imgFx.start(tpic.getCis()).chain(function(){this.element.remove();_this.store('active',false);});
                  });
                  imgFx.start($extend(fxv,{opacity:1}));
                  document.addEvent('click',function(){

                       img.fireEvent('click');
                       document.removeEvent('click',arguments.callee);

                  });

            },onerror:function(){
                _this.store('active',false);
                loading.remove();
            }});


   });


   }();
</script>

<script>
    /*
    *商品标签定位
    */
    (function(){

    var tips = $$('.GoodsTip');

   
    
    //var opacity = tips.getElement('img').get('op')[0];

    //tips.getElement('img').setStyle('opacity',opacity);

    if(tips.length>0){
    
    var parSize = {
        x : tips.getParent()[0].getSize().x,
        y : tips.getParent()[0].getSize().y
    };
    
    
    var GoodsTipPos= {
        tl:{left:0,top:0},
        tc:{left:(parSize.x)/2 - 25,top:0},
        tr:{top:0,right:0},
        ml:{left:0,top:(parSize.y)/2 - 25},
        mc:{left:(parSize.x)/2 - 25,top:(parSize.y)/2 -25},
        mr:{top:(parSize.y)/2 - 25,right:0},
        bl:{bottom:0,left:0},
        bc:{bottom:0,left:(parSize.x)/2 - 25},
        br:{bottom:0,right:0}
    };
    
    
    /*.setStyles({
        'top':Pos.top,
        'left':Pos.left,
        'right':Pos.right,
        'bottom':Pos.bottom
    });
    */
    tips.each(function(v){
        v.getParent().setStyle('position','relative');
        v.getElement('img').zoomImg(50,50);

        //if(window.ie6) {Pos.left -= 85;Pos.bottom+=100;};

        var proPos = v.getElement('img').get('pos');
        
        var Pos = GoodsTipPos[proPos];

        v.setStyles({
        'top':Pos.top,
        'left':Pos.left,
        'right':Pos.right,
        'bottom':Pos.bottom
    });
        //if(window.ie6){Pos.left += 85;Pos.bottom-=100;};
    })
    }
})();
</script>
